<template>
  <view class="reservation-container">
    <!-- 城市选择 -->
    <view class="city-select" @click="showCityPicker = true" v-if="currentCity.name">
      <text>{{ currentCity.cityName }}</text>
      <image class="arrow-icon" :src="commonStore.baseImageUrl + 'test-yujia/reservation/sanjiao-icon.png'
        ">
      </image>
    </view>

    <!-- 轮播广告 -->
    <view style="margin-bottom: 30rpx">
      <view class="ads-title">
        <text class="title"> 感受身体与心灵的双重滋养 </text>
        <view class="my-course" @click="handleMyCourse"> 我的课程 </view>
      </view>
      <swiper-ads />
    </view>

    <view class="course-order">
      <!-- 课程类型筛选 -->
      <course-filter :courseTypes="courseTypes" :active-type="activeType" @type-change="handleTypeChange" />

      <!-- 日期选择 -->
      <date-picker :dates="dates" :active-date="activeDate" @date-change="handleDateChange" />

      <!-- 搜索框 -->
      <view class="search-box" @click="handleSearch">
        <uni-icons type="search" size="16" color="#999" />
        <view class="input">搜索门店名称</view>
      </view>
    </view>

    <!-- 品质保证 -->
    <view class="quality-guarantee" @tap="showGuaranteeDetail">
      <image class="pingzhi-icon" :src="commonStore.baseImageUrl + 'test-yujia/reservation/feature@2x.png'
        " mode="aspectFit" />
      <text>品牌保证</text>
      <text class="desc">优质保证，安全保障，专业教学</text>
      <image class="arrow-icon" :src="commonStore.baseImageUrl + 'test-yujia/reservation/arrow-right1.png'
        ">
      </image>
    </view>
    <view style="padding: 50rpx 30rpx; box-sizing: border-box">
      <!-- 团课列表 -->
      <group-class v-if="activeType === 'group'" :storeList="allCourseList" />
      <!-- 私教课 -->
      <teacher-schedule v-if="activeType === 'privateCourse'" :scheduleData="allCourseList" />
      <!-- 门店列表 -->
      <store-list :stores="allCourseList" v-if="activeType === 'all' || activeType === 'littleClass'" />
      <!-- 底部内容 -->
      <footer-content :footerStyle="{ background: 'transparent' }" />
    </view>

    <!-- 底部导航栏 -->
    <tab-bar />
    <u-picker :show="showCityPicker" keyName="cityName" :columns="[commonStore.cityList]"
      @confirm="handleCityChange" @close="showCityPicker = false" @cancel="showCityPicker = false"></u-picker>
  </view>
</template>

<script setup>
import { onMounted, ref, watch } from "vue";
import SwiperAds from "./components/swiper-ads.vue";
import CourseFilter from "./components/course-filter.vue";
import DatePicker from "./components/date-picker.vue";
import StoreList from "./components/store-list.vue";
import { useCommonStore, useReservationStore } from "@/store";
import TabBar from "@/components/TabBar.vue";
import TeacherSchedule from "./components/teacher-schedule.vue";
import groupClass from "./components/group-class.vue";
import dayjs from "dayjs";
import { onShareAppMessage,onLoad } from "@dcloudio/uni-app";
import {
  getReservationListAPI,
  getGroupReservationListAPI,
  getSmallClassReservationListAPI,
  getPrivateReservationListAPI,
} from "@/apis/reservation";

const commonStore = useCommonStore();
const reservationStore = useReservationStore();

const currentCity = ref({ ...commonStore.storeAndCityInfo });
const showCityPicker = ref(false);
const activeType = ref("all");
const date = dayjs(new Date()).format("YYYY-MM-DD");
const activeDate = ref(date);
const searchKey = ref("");
const allCourseList = ref([]);
const courseTypes = ref([
  {
    type: "all",
    name: "全部",
  },
  {
    type: "group",
    name: "团课",
  },
  {
    type: "privateCourse",
    name: "私教",
  },
  {
    type: "littleClass",
    name: "小班课",
  },
]);

// 门店列表数据
const storeList = ref([
  {
    id: 1,
    name: "汉·瑜伽普拉提长沙旗舰店",
    logo: "/static/images/store-logo.png",
    rating: 4.5,
    commentCount: 118,
    address: "湖南省长沙市岳麓大道289号",
    distance: "2.9km",
  },
  {
    id: 2,
    name: "汉·瑜伽普拉提长沙旗舰店",
    logo: "/static/images/store-logo.png",
    rating: 4.5,
    commentCount: 118,
    address: "湖南省长沙市岳麓大道289号",
    distance: "2.9km",
  },
  {
    id: 3,
    name: "汉·瑜伽普拉提长沙旗舰店",
    logo: "/static/images/store-logo.png",
    rating: 4.5,
    commentCount: 118,
    address: "湖南省长沙市岳麓大道289号",
    distance: "2.9km",
  },
  // ... 更多门店数据
]);


// 添加分享功能
onShareAppMessage(() => {
  return {
    title: '汉·瑜伽普拉提', // 分享标题
    path: '/pages/reservation/reservation', // 分享路径，默认当前页面路径
    imageUrl: '', // 分享图片，使用门店图片，如果没有则使用默认图片
  }
});

const handleTypeChange = (type) => {
  activeType.value = type;
  // 重新获取门店列表
};

const handleSearch = () => {
  uni.navigateTo({
    url: "/pages/search/search",
  });
}

const handleDateChange = (date) => {
  activeDate.value = date;
  // 重新获取课程列表
};

const handleMyCourse = () => {
  uni.navigateTo({
    url: "/pages/subpackages/mineCenter/mine-course",
  });
};

const handleCityChange = (picked) => {
  console.log("picked", picked);
  currentCity.value = picked.value[0] || {};
  console.log("cityandstore", commonStore.storeAndCityInfo);
  showCityPicker.value = false;
};

const showGuaranteeDetail = () => {
  uni.navigateTo({
    url: "/pages/guarantee/index",
  });
};

const getAllCourseList = async () => {
  let response;
  let params = {
    cityCode: currentCity.value.cityCode,
    courseDate: activeDate.value,
  };

  switch (activeType.value) {
    case "all":
      response = await getReservationListAPI(params);
      break;
    case "group":
      response = await getGroupReservationListAPI(params);
      break;
    case "privateCourse":
      params.branchCode = commonStore.storeAndCityInfo.branchCode;
      // params.displayPassedTime = 1;
      response = await getPrivateReservationListAPI(params);
      break;
    case "littleClass":
      response = await getSmallClassReservationListAPI(params);
      break;
    default:
      console.error("未知的课程类型");
      return;
  }

  const { code, data } = response;
  allCourseList.value = data;
  console.log("data:", code, data);
};

// 监听 activeType 和 activeDate 的变化
watch([activeType, activeDate], async () => {
  await getAllCourseList();
});

onLoad(() => {
  const type = reservationStore.type;
  switch (type) {
    case "group":
      activeType.value = "group";
      break;
    case "privateCourse":
      activeType.value = "privateCourse";
      break;
    default:
      activeType.value = "all";
      break;
  }
  getAllCourseList(activeDate.value);
});

</script>

<style lang="scss">
.reservation-container {
  min-height: 100vh;
  background: #edede4;
  padding-bottom: calc(80rpx + var(--safe-area-inset-bottom));
  // background: transparent;

  .city-select {
    height: 88rpx;
    display: flex;
    align-items: center;
    padding: 0 30rpx;
    background: #8cb22c;
    color: #fff;
    font-size: 28rpx;
    gap: 8rpx;

    .arrow-icon {
      width: 10rpx;
      height: 9rpx;
      background: #eee;
    }
  }

  .ads-title {
    display: flex;
    justify-content: space-between;
    padding: 20rpx 18rpx;
    box-sizing: border-box;
    color: #8fb43a;
    font-size: 35rpx;
    padding-right: 0;
    align-items: center;

    .my-course {
      font-size: 24rpx;
      border-radius: 34rpx 0 0 34rpx;
      border: 2rpx solid #8fb43a;
      padding: 0rpx 12rpx;
      display: flex;
      align-content: center;
      justify-content: center;
      flex-shrink: 0;
    }
  }

  .course-order {
    padding: 0 50rpx;
  }

  .search-box {
    background: #fff;
    border-radius: 44rpx;
    height: 44rpx;
    display: flex;
    align-items: center;
    margin-bottom: 26rpx;

    .input {
      flex: 1;
      height: 100%;
      text-align: center;
      color: #999;
      font-size: 24rpx;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .placeholder {
      color: #b4b4b4;
      font-size: 24rpx;
    }
  }

  .quality-guarantee {
    background: linear-gradient(to bottom, #ccf13b, #e4eeb8);
    border-radius: 8rpx;
    display: flex;
    align-items: center;
    gap: 16rpx;
    height: 40rpx;
    padding: 0 50rpx;

    .pingzhi-icon {
      width: 26rpx;
      height: 26rpx;
    }

    .arrow-icon {
      width: 24rpx;
      height: 24rpx;
    }

    text {
      font-size: 26rpx;
      color: #333;
      font-weight: bold;

      &.desc {
        flex: 1;
        color: rgba($color: #3b3b3b, $alpha: 0.8);
        font-weight: normal;
        font-size: 20rpx;
      }
    }
  }
}
</style>